<!DOCTYPE html>
<html>
<head>
	<title>配送节点提醒 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.notification-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.header-section {
			margin-bottom: 25px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.stats-cards {
			margin-bottom: 25px;
		}
		.stat-card {
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			text-align: center;
			transition: all 0.3s ease;
		}
		.stat-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		}
		.stat-number {
			font-size: 32px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.notifications-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			overflow: hidden;
		}
		.section-header {
			padding: 20px 25px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.notification-list {
			max-height: 600px;
			overflow-y: auto;
		}
		.notification-item {
			padding: 20px 25px;
			border-bottom: 1px solid #f0f0f0;
			transition: all 0.3s ease;
			cursor: pointer;
		}
		.notification-item:hover {
			background: #f8f9fa;
		}
		.notification-item:last-child {
			border-bottom: none;
		}
		.notification-item.unread {
			background: #f0f9ff;
			border-left: 4px solid #409EFF;
		}
		.notification-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 10px;
		}
		.notification-title {
			font-weight: bold;
			color: #333;
			font-size: 16px;
			display: flex;
			align-items: center;
		}
		.notification-icon {
			margin-right: 8px;
			font-size: 18px;
		}
		.notification-time {
			color: #909399;
			font-size: 12px;
		}
		.notification-content {
			color: #666;
			line-height: 1.6;
			margin-bottom: 10px;
		}
		.notification-details {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			margin-top: 10px;
		}
		.detail-tag {
			padding: 4px 8px;
			background: #f0f0f0;
			border-radius: 4px;
			font-size: 12px;
			color: #666;
		}
		.node-type {
			padding: 4px 12px;
			border-radius: 12px;
			font-size: 12px;
			font-weight: bold;
		}
		.node-shipped {
			background: #e1f3d8;
			color: #67c23a;
		}
		.node-outbound {
			background: #fdf6ec;
			color: #e6a23c;
		}
		.node-transit {
			background: #f0f9ff;
			color: #409eff;
		}
		.node-arrived {
			background: #f4f4f5;
			color: #909399;
		}
		.node-delivered {
			background: #fef0f0;
			color: #f56c6c;
		}
		.filter-tabs {
			padding: 0 25px;
			background: #f8f9fa;
			border-bottom: 1px solid #e4e7ed;
		}
		.settings-section {
			margin-top: 25px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.setting-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.setting-item:last-child {
			border-bottom: none;
		}
		.setting-label {
			font-weight: 500;
			color: #333;
		}
		.setting-desc {
			color: #666;
			font-size: 14px;
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="notification-container">
			<!-- 头部区域 -->
			<div class="header-section">
				<h2 style="margin-bottom: 20px; color: #333;">🔔 配送节点提醒</h2>
				<p style="color: #666; margin: 0;">实时接收衡阳地区订单各个节点的状态推送，包括从衡阳发货、本地配送、到达等关键节点信息</p>
			</div>

			<!-- 统计卡片 -->
			<el-row :gutter="20" class="stats-cards">
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #409EFF;">{{ stats.total }}</div>
						<div class="stat-label">总提醒数</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #67C23A;">{{ stats.unread }}</div>
						<div class="stat-label">未读提醒</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #E6A23C;">{{ stats.today }}</div>
						<div class="stat-label">今日提醒</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #F56C6C;">{{ stats.urgent }}</div>
						<div class="stat-label">紧急提醒</div>
					</div>
				</el-col>
			</el-row>

			<!-- 提醒列表 -->
			<div class="notifications-section">
				<div class="section-header">
					<h3 style="margin: 0;">📋 提醒列表</h3>
					<div>
						<el-button size="small" @click="markAllRead" type="text" style="color: white;">全部标记已读</el-button>
						<el-button size="small" @click="refreshNotifications" type="text" style="color: white;">
							<i class="el-icon-refresh"></i> 刷新
						</el-button>
					</div>
				</div>

				<!-- 筛选标签 -->
				<div class="filter-tabs">
					<el-tabs v-model="activeTab" @tab-click="handleTabClick">
						<el-tab-pane label="全部" name="all"></el-tab-pane>
						<el-tab-pane label="未读" name="unread"></el-tab-pane>
						<el-tab-pane label="发货" name="shipped"></el-tab-pane>
						<el-tab-pane label="出库" name="outbound"></el-tab-pane>
						<el-tab-pane label="在途" name="transit"></el-tab-pane>
						<el-tab-pane label="到站" name="arrived"></el-tab-pane>
						<el-tab-pane label="签收" name="delivered"></el-tab-pane>
					</el-tabs>
				</div>

				<!-- 提醒列表 -->
				<div class="notification-list">
					<div 
						v-for="(notification, index) in filteredNotifications" 
						:key="index"
						:class="['notification-item', {unread: !notification.read}]"
						@click="markAsRead(notification)"
					>
						<div class="notification-header">
							<div class="notification-title">
								<span class="notification-icon">{{ notification.icon }}</span>
								{{ notification.title }}
								<span :class="'node-type node-' + notification.type" style="margin-left: 10px;">
									{{ notification.typeText }}
								</span>
							</div>
							<div class="notification-time">{{ notification.time }}</div>
						</div>
						<div class="notification-content">{{ notification.content }}</div>
						<div class="notification-details">
							<span class="detail-tag">订单号：{{ notification.orderNo }}</span>
							<span class="detail-tag" v-if="notification.location">位置：{{ notification.location }}</span>
							<span class="detail-tag" v-if="notification.temperature">温度：{{ notification.temperature }}℃</span>
							<span class="detail-tag" v-if="notification.operator">操作员：{{ notification.operator }}</span>
						</div>
					</div>
					
					<div v-if="filteredNotifications.length === 0" style="padding: 50px; text-align: center; color: #999;">
						<i class="el-icon-bell" style="font-size: 48px; margin-bottom: 15px;"></i>
						<p>暂无相关提醒</p>
					</div>
				</div>
			</div>

			<!-- 提醒设置 -->
			<div class="settings-section">
				<h3 style="margin-bottom: 20px; color: #333;">⚙️ 提醒设置</h3>
				<div class="setting-item">
					<div>
						<div class="setting-label">发货提醒</div>
						<div class="setting-desc">商品发货时推送提醒</div>
					</div>
					<el-switch v-model="settings.shipped"></el-switch>
				</div>
				<div class="setting-item">
					<div>
						<div class="setting-label">出库提醒</div>
						<div class="setting-desc">商品从仓库出库时推送提醒</div>
					</div>
					<el-switch v-model="settings.outbound"></el-switch>
				</div>
				<div class="setting-item">
					<div>
						<div class="setting-label">在途提醒</div>
						<div class="setting-desc">商品运输过程中的关键节点提醒</div>
					</div>
					<el-switch v-model="settings.transit"></el-switch>
				</div>
				<div class="setting-item">
					<div>
						<div class="setting-label">到站提醒</div>
						<div class="setting-desc">商品到达配送站点时推送提醒</div>
					</div>
					<el-switch v-model="settings.arrived"></el-switch>
				</div>
				<div class="setting-item">
					<div>
						<div class="setting-label">签收提醒</div>
						<div class="setting-desc">商品签收完成时推送提醒</div>
					</div>
					<el-switch v-model="settings.delivered"></el-switch>
				</div>
				<div class="setting-item">
					<div>
						<div class="setting-label">温度异常提醒</div>
						<div class="setting-desc">冷链运输温度异常时立即推送提醒</div>
					</div>
					<el-switch v-model="settings.temperatureAlert"></el-switch>
				</div>
				<div style="margin-top: 20px; text-align: right;">
					<el-button type="primary" @click="saveSettings">保存设置</el-button>
				</div>
			</div>
		</div>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				activeTab: 'all',
				stats: {
					total: 28,
					unread: 5,
					today: 12,
					urgent: 2
				},
				notifications: [
					{
						id: 1,
						icon: '📦',
						title: '订单YN202401190001已从衡阳发货',
						type: 'shipped',
						typeText: '发货',
						content: '您的订单【衡阳湘莲 500g】已从衡阳市蒸湘区物流园发货，预计1-2天内送达',
						time: '2024-01-19 11:15:00',
						orderNo: 'YN202401190001',
						location: '衡阳市蒸湘区物流园',
						temperature: '4.0',
						operator: '张师傅',
						read: false
					},
					{
						id: 2,
						icon: '📤',
						title: '订单YN202401190001商品出库',
						type: 'outbound',
						typeText: '出库',
						content: '您的订单商品已从衡阳市雁峰区仓库出库，正在准备装车发货',
						time: '2024-01-19 10:30:00',
						orderNo: 'YN202401190001',
						location: '衡阳市雁峰区仓储中心',
						temperature: '3.8',
						operator: '王仓管员',
						read: true
					},
					{
						id: 3,
						icon: '🚛',
						title: '订单YN202401190001经过衡衡高速',
						type: 'transit',
						typeText: '在途',
						content: '您的订单正在运输途中，当前位置：衡衡高速衡阳服务区，温度正常',
						time: '2024-01-19 15:30:00',
						orderNo: 'YN202401190001',
						location: '衡衡高速衡阳服务区',
						temperature: '4.2',
						operator: '张师傅',
						read: false
					},
					{
						id: 4,
						icon: '🌡️',
						title: '温度异常提醒',
						type: 'transit',
						typeText: '异常',
						content: '订单YN202401180002在衡阳市蒸湘区运输过程中温度异常，当前温度8.5℃，已通知司机处理',
						time: '2024-01-19 14:20:00',
						orderNo: 'YN202401180002',
						location: '衡阳市蒸湘区',
						temperature: '8.5',
						operator: '李师傅',
						read: false
					},
					{
						id: 5,
						icon: '🏦',
						title: '订单YN202401180001已到达衡阳配送站',
						type: 'arrived',
						typeText: '到站',
						content: '您的订单已到达衡阳市珠晖区配送站，即将开始最后一公里配送',
						time: '2024-01-19 08:00:00',
						orderNo: 'YN202401180001',
						location: '衡阳市珠晖区配送站',
						operator: '配送站',
						read: true
					},
					{
						id: 6,
						icon: '✅',
						title: '订单YN202401170001已在衡阳签收',
						type: 'delivered',
						typeText: '签收',
						content: '您的订单【衡阳黄花菜 1kg】已在衡阳市蒸湘区某某小区由本人签收，感谢您的购买！',
						time: '2024-01-18 16:30:00',
						orderNo: 'YN202401170001',
						location: '衡阳市蒸湘区某某小区',
						operator: '配送员小王',
						read: false
					}
				],
				settings: {
					shipped: true,
					outbound: true,
					transit: true,
					arrived: true,
					delivered: true,
					temperatureAlert: true
				}
			},
			computed: {
				filteredNotifications() {
					if (this.activeTab === 'all') {
						return this.notifications;
					} else if (this.activeTab === 'unread') {
						return this.notifications.filter(n => !n.read);
					} else {
						return this.notifications.filter(n => n.type === this.activeTab);
					}
				}
			},
			methods: {
				handleTabClick(tab) {
					this.activeTab = tab.name;
				},
				markAsRead(notification) {
					if (!notification.read) {
						notification.read = true;
						this.stats.unread--;
						this.$message.success('已标记为已读');
					}
				},
				markAllRead() {
					this.notifications.forEach(n => n.read = true);
					this.stats.unread = 0;
					this.$message.success('已全部标记为已读');
				},
				refreshNotifications() {
					this.$message.info('正在刷新提醒...');
					// 这里可以调用API刷新数据
					setTimeout(() => {
						this.$message.success('提醒已刷新');
					}, 1000);
				},
				saveSettings() {
					this.$message.success('提醒设置已保存');
					// 这里可以调用API保存设置
				}
			}
		});
	</script>
</body>
</html>